<template>
  <div class="forms">
      <ol>
          <li v-for="(item,index) in title" :key="index" @click="chk(index)" :style="{borderColor:index===chkForm?'#FFCF36':'transparent'}">{{item}}</li>
      </ol>
      <AllQuiz v-if="chkForm===0" />
      <MyQuiz v-if="chkForm===1" />
      <History v-if="chkForm===2" />
  </div>
</template>

<script>
import AllQuiz from './allQuiz.vue';
import MyQuiz from './myQuiz.vue';
import History from './history.vue';
export default {
    components:{
        AllQuiz,
        MyQuiz,
        History
    },
    data(){
        return{
            chkForm:0
        }
    },
    computed:{
        title(){
            return [this.$t("index.allQuiz"),this.$t("index.myQuiz"),this.$t("index.history")]
        }
    },
    methods:{
        chk(index){
            this.chkForm = index;
        }
    }
}
</script>

<style lang="scss" scoped>
.forms{
    >ol{
        display: flex;
        border-bottom: solid 0.0033rem #445F74;
        color: #7EA1BD;
        font-size: .13rem;
        padding: 0 .7rem;
        justify-content: space-between;
        text-align: center;
        >li{
            width: .53rem;
            border-bottom: solid .014rem transparent;
            padding: .07rem 0;
        }
    }
}
</style>